<template>
    <div class="scene">
        <h2 class="scene-title">商家实景</h2>
        <div class="image-scroll" ref="imageScroll">
            <div class="image">
                <img v-for="(img, index) in pics" :key="index"  :src="img" alt="" >
            </div>
        </div>
    </div>
</template>


<script>
import BScroll from "better-scroll";
import Vue from "vue";

export default {
    name: "scene",
    props: {
        pics: {
            type: Array
        }
    },
    methods: {
        _initScroll() {
            this.imageScroll = new BScroll(this.$refs.imageScroll, {
                scrollX: true,
                scrollY: false
            })
        }
    },
    created() {
        Vue.nextTick(() => {
            console.log(111);
            this._initScroll();
        })
    }
    
}
</script>


<style lang="stylus" ref="stylesheet/stylus">
@import "../assets/stylus/index.styl";
.scene 
    margin-bottom 18px
    overflow hidden 
    .scene-title
        font-size 16px
        font-weight bold
    .image-scroll
        font-size 0
        margin-top 12px
        width 339px
        height 90px
        .image
            font-size 0
            width 498px
            overflow auto 
            img    
                display inline-block
                width 120px
                height 90px    
                &:nth-child(n + 2) 
                    margin-left 6px
</style>
